@use "variables";

@mixin visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
}

@mixin retina {
  @media (min-resolution: variables.$retina-dpi), (min-resolution: variables.$retina-dppx) {
    @content;
  }
}

@mixin hover {
  @media (hover: hover) {
    &:hover:not(.focus-visible) {
      @content;
    }
  }
}

@mixin focus {
  &.focus-visible:focus {
    @content;
  }
}

@mixin active {
  &.focus-visible:active {
    @content;
  }
}

@mixin hover-focus {
  @media (hover: hover) {
    &:hover:not(.focus-visible) {
      @content;
    }
  }

  &.focus-visible:focus {
    @content;
  }
}

// Desktop first

@mixin vp-1919 {
  @media (max-width: (variables.$vp-1920 - 1px)) {
    @content;
  }
}

@mixin vp-1439 {
  @media (max-width: (variables.$vp-1440 - 1px)) {
    @content;
  }
}

@mixin vp-1279 {
  @media (max-width: (variables.$vp-1280 - 1px)) {
    @content;
  }
}

@mixin vp-1023 {
  @media (max-width: (variables.$vp-1024 - 1px)) {
    @content;
  }
}

@mixin vp-767 {
  @media (max-width: (variables.$vp-768 - 1px)) {
    @content;
  }
}

@mixin vp-374 {
  @media (max-width: (variables.$vp-375 - 1px)) {
    @content;
  }
}
